import thin_render from "./thin_render.mjs";
import thin_ajax from "./thin_ajax.mjs";
import { clearafterqueue } from "./delay_render.mjs";
import { thin } from "../thin3.mjs";
import { nearest_data } from "./nearest.mjs";

/**
 * Ajax模板渲染函数 - 用于处理Ajax请求并根据模板渲染结果
 * @param {HTMLElement} container - 容器元素，用于放置渲染结果
 * @param {Object} template - 模板配置对象
 * @param {string} template.ajax - Ajax请求的URL地址
 * @param {string} [template.type='GET'] - 请求类型，如 'GET', 'POST' 等
 * @param {Object|Function} [template.query] - 请求参数，可以是对象或返回对象的函数
 * @param {string} [template.dataType='json'] - 预期服务器返回的数据类型
 * @param {string} [template.contentType='application/json'] - 发送数据的内容类型
 * @param {boolean} [template.debug] - 是否开启调试模式，打印返回数据
 * @param {string|Object} [template.loading] - 加载状态的显示内容或配置
 * @param {Object} [template.success] - 成功时的渲染模板
 * @param {Object} [template.error] - 错误时的自定义渲染模板
 * @param {string|HTMLElement} [template.watch] - 监听变化的元素，当其变化时重新渲染
 */
export default function (container, template) {
  // 创建ajax元素并添加到容器中
  let element = document.createElement("ajax");
  container.appendChild(element);

  // 保存模板和查询参数，用于后续重新渲染
  element.thin_template = template;
  element.thin_query = template.query;

  // 定义渲染方法
  element.thin_render = function () {
    // 清空当前元素内容
    thin(element).empty();
    let loading;

    // 如果配置了loading，显示加载状态
    if (template.loading) {
      loading = document.createElement("loading");
      element.appendChild(loading);
      thin_render(loading, template.loading || "loading...");
    }

    // 发起ajax请求
    thin_ajax({
      url: template.ajax,
      type: template.type,
      // 处理查询参数：如果是函数则执行函数获取参数，否则直接使用参数值
      data:
        typeof element.thin_query === "function"
          ? element.thin_query({
              container,
              template,
              data: nearest_data(container),
            })
          : element.thin_query,
      dataType: template.dataType || "json",
      contentType: template.contentType || "application/json",

      // 请求成功的回调
      success: (data) => {
        // 如果开启debug模式，打印返回数据
        if (template.debug) {
          console.log({ data });
        }
        // 移除loading显示
        if (template.loading) thin(loading).remove();
        // 保存返回数据并渲染成功模板
        element.thin_data = data;
        thin_render(element, template.success);
        clearafterqueue();
      },

      // 请求失败的回调
      error: (error, statusText) => {
        // 移除loading显示
        if (template.loading) thin(loading).remove();

        // 处理错误情况：使用自定义错误模板或默认错误模板
        if (template.error) {
          thin(element).render(template.error, error);
        } else {
          // 默认错误模板，显示详细的错误信息
          let err_template = {
            error_msg: [
              { f1: "[[statusText]]", title: "statusText" },
              {
                fieldset: [
                  { f3: "[[code]]", title: "code" },
                  { f3: "[[errno]]", title: "errno" },
                  { f3: "[[index]]", title: "index" },
                  { f3: "[[sql]]", title: "sql" },
                  { f3: "[[sqlMessage]]", title: "sqlMessage" },
                  { f3: "[[sqlState]]", title: "sqlState" },
                ],
                title: "responseJSON",
                datapath: "responseJSON",
              },
              { fieldset: "[[responseText]]", title: "responseText" },
            ],
            data: error,
          };
          thin_render(element, err_template);
        }
      },
    });
  };

  // 初始渲染
  element.thin_render();

  // 如果配置了watch，监听变化并重新渲染
  if (template.watch) {
    thin(template.watch, template.context || "body").on("change", (e) => {
      console.log({ ajax_watch: e });
      element.thin_render();
    });
  }
}
